<template>
  <div class="page">
    <!-- 筛选：会员等级、注册时间、状态 -->
    <el-form :inline="true" :model="query" class="mb-12">
      <el-form-item label="会员等级">
        <el-select v-model="query.level" placeholder="请选择" clearable>
          <el-option label="普通会员" value="normal" />
          <el-option label="黄金会员" value="gold" />
        </el-select>
      </el-form-item>
      <el-form-item label="注册时间">
        <el-date-picker v-model="query.range" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="query.status" placeholder="请选择" clearable>
          <el-option label="正常" value="enabled" />
          <el-option label="禁用" value="disabled" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格：列表展示、查看详情、禁用/启用 -->
    <el-table :data="list" border>
      <el-table-column prop="id" label="用户ID" width="100" />
      <el-table-column prop="username" label="用户名" min-width="140" />
      <el-table-column prop="phone" label="手机号" width="140" />
      <el-table-column prop="levelText" label="会员等级" width="120" />
      <el-table-column prop="registerAt" label="注册时间" min-width="160" />
      <el-table-column prop="lastLoginAt" label="最近登录时间" min-width="160" />
      <el-table-column prop="totalSpent" label="消费总额" width="120" />
      <el-table-column prop="statusText" label="状态" width="100" />
      <el-table-column label="操作" width="240">
        <template #default="{ row }">
          <el-button size="small" @click="openEdit(row)">编辑信息</el-button>
          <el-button size="small" type="primary" @click="toggleStatus(row)">{{ row.status==='enabled' ? '禁用' : '启用' }}</el-button>
          <el-button size="small" @click="openOrders(row)">历史订单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="mt-12 flex-end">
      <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="pageSize" :current-page="page" @current-change="(p)=>{page=p; fetchList()}" />
    </div>

    <!-- 编辑弹窗：昵称、手机号 -->
    <el-dialog v-model="visible" title="编辑用户信息" width="520px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="昵称" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="visible=false">取消</el-button>
        <el-button type="primary" :loading="saving" @click="onSubmit">保存</el-button>
      </template>
    </el-dialog>

    <!-- 历史订单弹窗：示例展示 -->
    <el-dialog v-model="ordersVisible" title="历史订单" width="720px">
      <el-table :data="orderList" border>
        <el-table-column prop="orderNo" label="订单号" min-width="160" />
        <el-table-column prop="totalAmount" label="总金额" width="120" />
        <el-table-column prop="statusText" label="状态" width="120" />
        <el-table-column prop="createdAt" label="创建时间" min-width="160" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script setup>
// 用户管理页面：支持筛选、详情查看、编辑信息、禁用/启用
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

const query = reactive({ level: '', range: [], status: '' })
const list = ref([])
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)

const visible = ref(false)
const saving = ref(false)
const formRef = ref()
const form = reactive({ id: null, username: '', phone: '' })
const rules = {
  username: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
}

const ordersVisible = ref(false)
const orderList = ref([])

function fetchList(){
  const items = Array.from({ length: pageSize.value }, (_, i) => {
    const id = (page.value - 1) * pageSize.value + i + 1
    const status = i % 2 === 0 ? 'enabled' : 'disabled'
    return {
      id,
      username: `用户${id}`,
      phone: `1380000${String(id).padStart(4,'0')}`,
      levelText: i % 2 === 0 ? '普通会员' : '黄金会员',
      registerAt: dayjs().subtract(i+10, 'day').format('YYYY-MM-DD HH:mm:ss'),
      lastLoginAt: dayjs().subtract(i, 'hour').format('YYYY-MM-DD HH:mm:ss'),
      totalSpent: (1000 + i * 20).toFixed(2),
      status,
      statusText: status === 'enabled' ? '正常' : '禁用'
    }
  })
  list.value = items
  total.value = 80
}

function onSearch(){ page.value = 1; fetchList() }
function onReset(){ query.level=''; query.range=[]; query.status=''; onSearch() }

function openEdit(row){ Object.assign(form, { id: row.id, username: row.username, phone: row.phone }); visible.value = true }
function onSubmit(){
  formRef.value.validate((ok)=>{
    if(!ok) return
    saving.value = true
    setTimeout(()=>{ saving.value=false; visible.value=false; ElMessage.success('保存成功（示例）'); fetchList() }, 600)
  })
}

function toggleStatus(row){
  const next = row.status === 'enabled' ? 'disabled' : 'enabled'
  ElMessageBox.confirm(`确认${next==='disabled'?'禁用':'启用'}该账号吗？`, '提示', { type: 'warning' }).then(()=>{
    ElMessage.success('状态更新成功（示例）')
    fetchList()
  })
}

function openOrders(row){
  ordersVisible.value = true
  orderList.value = Array.from({ length: 5 }, (_, i) => ({
    orderNo: `ORD-${row.id}-${i+1}`,
    totalAmount: (200 + i * 30).toFixed(2),
    statusText: i % 2 === 0 ? '已完成' : '已取消',
    createdAt: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm:ss')
  }))
}

onMounted(fetchList)
</script>

<style scoped>
.page { background: #fff; padding: 16px; border: 1px solid #ebeef5; }
.mb-12 { margin-bottom: 12px; }
.mt-12 { margin-top: 12px; }
.flex-end { display: flex; justify-content: flex-end; }
</style>